<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>设备管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=e9c5bb62">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=66b457d6">
    <style type="text/css">
        th {
            text-align: center;
            width: 80px;
            height: 30px;
            background-color: #f8f8f8;
        }

        td {
            height: 35px;

        }

        select {
            width: 100px;
        }
        .oaBtn {
            background: url(/dist/img/btn-bj2.png) repeat-y !important;
            background-size: 100% 100% !important;
            color: #fff !important;
        }
    </style>
</head>
<body>

<div id="dev" style="position:relative; top:10px;">

    <div>
        <!--查询条件选择-->
        公司
        <select id="testCom" v-model="selectCom" @change="getBran">
            <!--   <option selected="selected">公司</option>-->
            <option v-for="itemC in itemsCom" v-bind:value="itemC.id">{{itemC.name}}</option>
        </select>
        品牌
        <select id="testBran" v-model="selectBran" @change="getMod">
            <option v-for="itemB in itemsBran" v-bind:value="itemB.id">{{itemB.name}}</option>
        </select>
        型号
        <select id="testMod" v-model="selectMod" @change="getBuc">
            <option v-for="itemMo in itemsMod" v-bind:value="itemMo.modelId">{{itemMo.modelName}}</option>
        </select>
        斗容
        <select id="testBucked">
            <option v-for="itemBu in itemsBuc">{{itemBu.bucketCapacity}}</option>
        </select>
        序列号
        <input type="text" id="testSeq" size="5">
        <!--根据条件查询-->
        <input type="button" value="查询" class="oaBtn" id="getBy" @click="sel()" style="position:relative; left:10px;">

        <input type="button" value="新建新机入库单" class="oaBtn" style="position:relative; left:330px;" @click="save()">
        <input type="button" value="新建旧机入库单" class="oaBtn" style="position:relative; left:340px;" @click="saveOld()">
    </div>

    <!--查询显示的list表-->
    <table border="1" id="table" style=" text-align: center;position:relative; top:10px;border:1px solid #cbcbcd;">
        <tr>
            <th>公司</th>
            <th>品牌</th>
            <th>型号</th>
            <th>斗容</th>
            <th>序列号</th>
            <th>新机/旧机</th>
            <th>出厂年份</th>
            <th>小时数</th>
            <th>存放地</th>
            <th>最低限价(万)</th>
            <th>设备来源</th>
            <th>入库时间</th>
            <th>操作人员</th>
            <th>备注</th>
            <th>操作</th>
        </tr>
        <tr v-for="item in items">
            <td>{{item.companyName}}</td>
            <td>{{item.brandName}}</td>
            <td>{{item.modelName}}</td>
            <td>{{item.bucketCapacity}}</td>
            <td>{{item.sequence}}</td>
            <td>{{item.state}}</td>
            <td>{{item.year}}</td>
            <td>{{item.hour}}</td>
            <td>{{item.storagePlace}}</td>
            <td>{{item.lowestPrice}}</td>
            <td>{{item.source}}</td>
            <td>{{item.createTime}}</td>
            <td>{{item.createUser}}</td>
            <td>{{item.remark}}</td>
            <td>
                <a id="upd" @click="update(item.deviceId)">
                    编辑</a> &nbsp;&nbsp;
                <a id="del" @click="del(item.deviceId)">删除</a>
            </td>
        </tr>
    </table>
    <div class="oa-pager text-center" style="margin-top: 5px;">
        共
        <span id="allCount"> 0 </span>条记录&nbsp;&nbsp;&nbsp;
        <span id="nowPage"> 1 </span>/<span id="allPage">1</span>&nbsp;&nbsp;&nbsp;
        <span class="oa-pager-button" id="first">首页</span>
        <span class="oa-pager-button" id="prev">上一页</span>
        <span class="oa-pager-button" id="next">下一页</span>
        <span class="oa-pager-button" id="last">尾页</span>
    </div>

</div>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=0b5caf39"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=0c4d95a9"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<!--oa-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=63aed32f"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<!--ztree组件所需js-->
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="/dist/js/pages/apply/money/class.js"></script>
<script type="text/javascript" src="/dist/js/pages/system/systemService.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/commonService.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/changeMoneyToChinese.js"></script>
<script type="text/javascript" src="/dist/plugins/print/print.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript">
    //分页代码
    $.wyui.page.dataUrl = server.ip + "/device/getDeviceList.json";
    $.wyui.page.getByPage_callback = function (records) {
        console.log(records);
        app.items = records;
    };
    $.wyui.page.getByPage_scroll_callback = function (list) {
        if (list.length < 30) {
            isLoad = false;
        } else {
            for (var i = 0; i < list.length; i++) {
                app.list.push(list[i]);
            }
            isLoad = true;
        }
    };
    var app = new Vue({
        el: '#dev',
        data: {
            items: [],
            itemsCom: [],
            itemsBran: [],
            itemsMod: [],
            itemsBuc: [],
            selectCom: '',
            selectBran: '',
            selectMod: '',
            isOk: '',
        },
        mounted: function () {
            var that = this;

            /*进入页面立刻查询设备的list*/
//            $.wyui.postMethod('/device/getDeviceList.json', {}, function (r) {
//                console.log(r);
//                that.items = r.records;
//            });
            $.wyui.page.getByPage();
            /*首先显示公司下拉表*/
            $.wyui.postMethod('/companyBrand/findCompanyList.json', {}, function (r) {
                console.log(r);
                that.itemsCom = r.companies;
            });
        },
        methods: {
            /*选中公司下拉表时触发此事件,查询该公司下的品牌*/
            getBran(){
                var that = this;
                var s = that.selectCom;
                var data = {'companyId': s.toString()};
                $.wyui.postMethod('/companyBrand/findBrandListByCompanyId.json', data, function (r) {
                    console.log(r);
                    that.itemsBran = r.brands;
                })
            },
            /*选中品牌下拉表时触发此事件,查询该品牌下的型号*/
            getMod(){
                var that = this;
                var s = that.selectBran;
                var data = {'brandId': s};
                $.wyui.postMethod('/deviceModel/getModelList.json', data, function (r) {
                    console.log(r);
                    that.itemsMod = r.records;
                })
            },
            /*选中型号下拉表时触发此事件,查询该型号下的斗容*/
            getBuc(){
                var that = this;
                var s = that.selectMod;
                var s2 = that.selectBran;
                var data = {'modelId': s, 'brandId': s2};
                $.wyui.postMethod('/deviceModel/getBucketCapacityList.json', data, function (r) {
                    console.log(r);
                    that.itemsBuc = r;
                })
            },
            /*根据选中条件查询设备信息(无法获取传回来的records)*/
            sel(){
                var that = this;
                var optionsCom = $("#testCom option:selected").text();
                var optionsBran = $("#testBran option:selected").text();
                var optionsMod = $("#testMod option:selected").text();
                var optionsBuc = $("#testBucked option:selected").text();
                var optionsSqu = $("#testSqu option:selected").text();
                var data = {
                    'companyName': optionsCom,
                    'brandName': optionsBran,
                    'modelName': optionsMod,
                    'bucketCapacity': optionsBuc,
                    'squence': optionsSqu,
                };
                $.wyui.postMethod('/device/getDeviceList.json', data, function (r) {
                    if (!r.records) {
                        alert("没有找到符合条件的信息，请重新输入");
                    } else {
                        console.log(r);
                        that.items = r.records;
                    }
                })
            },
            /*点击"删除"按钮，触发事件修改信息*/
            del(id){
                alert("您确定要删除此信息吗？");
                var data = {'id': id}
                var that = this;
                $.wyui.postMethod('/device/delById.json', data, function (r) {
                    console.log(r);
                    that.isOk = r.isOk;
                    if (that.isOk == false) {
                        alert("删除失败请重新操作");
                    } else {
                        location.href = "deviceList.html";
                    }

                });
            },
            /*点击"编辑"按钮，触发事件修改信息*/
            update(id){
                $.dialog({
                    content: 'url:updateDevice.html?id=' + id,
                    title: '修改设备信息',
                    width: 1000,
                    height: 300,
                    max: true,
                    min: true,
                    lock: true
                });
            },
            /*新建新机入库单*/
            save(){
                $.dialog({
                    content: 'url:saveDevice.html',
                    title: '修改设备信息',
                    width: 1000,
                    height: 300,
                    max: true,
                    min: true,
                    lock: true
                });
            },
            /*新建旧机入库单*/
            saveOld(){
                $.dialog({
                    content: 'url:OldDevice.html',
                    title: '修改设备信息',
                    width: 1000,
                    height: 600,
                    max: true,
                    min: true,
                    lock: true
                });
            }

        }/*methods*/
    })

</script>
</body>
</html>